<template>
  <view class="cate">
    <my-search autoRouter></my-search>
    <view class="scroll-box">
      <!-- 左侧滚动区域 -->
      <scroll-view class="left-scroll"
                   scroll-y="true">
        <view :class="['first-item', activeIndex === index ? 'active' : '']"
              v-for="(item, index) in cateList"
              :key="item.cat_id"
              @click="firstCateClick(index)">
          {{item.cat_name}}
        </view>
      </scroll-view>
      <!-- 右侧滚动区域 -->
      <scroll-view class="right-scroll"
                   scroll-y="true"
                   :scroll-top="rightScrollTop">
        <view class="second-item"
              v-for="item in cateSecondList"
              :key="item.cat_id">
          <view class="title">/ {{item.cat_name}} /</view>
          <view class="third-box">
            <navigator class="third-item"
                       v-for="item1 in item.children"
                       :key="item1.cat_id"
                       :url="`/subpack/good_list/good_list?cid=${item1.cat_id}`">
              <image :src="item1.cat_icon"></image>
              <text>{{item1.cat_name}}</text>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
  import badgeMixin from '@/mixins/tabbar-badge.js'

  export default {
    mixins: [badgeMixin],
    data() {
      return {
        // 当前选中的分类
        activeIndex: 0,
        // 分类项数据
        cateList: [],
        // 右侧滚动条距离顶部高度
        rightScrollTop: 0
      }
    },
    computed: {
      /**
       * 二级分类数据
       */
      cateSecondList() {
        let secondList = this.cateList[this.activeIndex]
        return secondList ? secondList.children : []
      }
    },
    mounted() {
      this.getCateList()
    },
    methods: {
      /**
       * 获取分类列表数据
       */
      getCateList() {
        return uni.$http.get('categories').then(res => {
          let data = res.data
          if (data.meta.status === 200) {
            this.cateList = data.message
          } else
            uni.$showError()
        })
      },
      /**
       * 一级分类点击事件
       */
      firstCateClick(index) {
        this.activeIndex = index
        this.rightScrollTop = ~this.rightScrollTop
      }
    }
  }
</script>

<style lang="scss">
  page {
    height: 100%;
  }

  .cate {
    height: 100%;

    .scroll-box {
      height: calc(100% - 100rpx);
      display: flex;
      align-content: space-around;

      .left-scroll {
        width: 180rpx;
        background-color: #f7f7f7;

        .first-item {
          line-height: 100rpx;
          font-size: 28rpx;
          text-align: center;

          &.active {
            background-color: white;
            position: relative;

            &::before {
              height: 50rpx;
              width: 4rpx;
              display: block;
              position: absolute;
              top: 50%;
              transform: translate(0, -50%);
              content: '';
              background-color: #c00000;
            }
          }
        }
      }

      .right-scroll {
        flex: 1;

        .second-item {
          .title {
            font-size: 24rpx;
            font-weight: 900;
            text-align: center;
            padding: 30rpx 0;
          }

          .third-box {
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;

            .third-item {
              width: 33.33%;
              padding: 10rpx 0;
              display: flex;
              flex-direction: column;
              align-items: center;

              image {
                width: 120rpx;
                height: 120rpx;
              }

              text {
                font-size: 24rpx;
              }
            }
          }
        }
      }
    }
  }
</style>
